<template>
  <div class="home-menu flex-row">
    <div class="home-menu-classify-box flex-row">
      <div class="home-menu-classify-body flex-row" v-for="(classify,index) in menuList">

        <div class="home-menu-classify-title">{{classify.name}}</div>
        <div class="flex-row-end" style="height: 100%">
          <div class="home-menu-classify-item" v-for="(menu,i) in classify.children">
            {{menu.name}}
          </div>
        </div>
      </div>
    </div>

    <div class="home-menu-ranking-box">预留区域</div>
    <div class="home-menu-other-box">预留区域</div>
  </div>
</template>

<script>
export default {
  name: "HomeMenu",
  data(){
    return{
      menuList:[
        {
          name:"校园",
          children:[
            {
              name:"清华大学",
              to:""
            },
            {
              name:"北京大学",
              to:""
            }
          ]
        },
        {
          name:"动物",
          children:[
            {
              name:"猫",
              to:""
            },
            {
              name:"狗",
              to:""
            }
          ]
        },
        {
          name:"排行榜",
          children:[
            {
              name:"最受欢迎",
              to:""
            },
            {
              name:"最多点赞",
              to:""
            }
          ]
        }
      ]
    }
  }
}
</script>

<style scoped lang="less">
  .home-menu{
    width: 100%;
    min-height: 100px;
    height: 100%;
    //background-color: #A3D0C3;
    background-color: #FFFFFF;
    box-shadow: 0 2px 12px 2px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding: 20px;

    .home-menu-classify-box {
      flex: 6;
      height: 100%;
      flex-wrap: wrap;
      min-width: 300px;

      .home-menu-classify-body {
        height: 100%;
        flex: 1;

        .home-menu-classify-title {
          font-weight: 700;
          height: 30px;
          padding: 5px;
          font-size: 18px;
          border-radius: 5px;
          background-color: #A3D0C3;
        }
        .home-menu-classify-item{

          width: 60px;
          height: 26px;
          font-size:13px;
          line-height: 26px;
          border-radius: 6px;
          background-color: #f6f7f8;
          cursor: pointer;
          color: #61666d;
          font-weight: 400;
          caret-color: transparent;
          margin: 5px;

          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          &:hover{
            background-color: #E1E3E5;
          }
        }
      }
    }
    .home-menu-ranking-box{
      flex: 3;
      height: 100%;
      //background-color: #1c1c1c;
    }
    .home-menu-other-box{
      flex: 1;
      height: 100%;
      //background-color: tomato;
    }
  }

  @media screen and (max-width: 700px){

  }
</style>